<script>
export default {
  name: "ProcessItem",
  props: {
    process:{
      default: 0
    }
  },
  computed:{
    processPx(){
      return this.process/100 * 295.31
    }
  }
}
</script>

<template>
  <div class="process">
    <svg viewBox="0 0 120 120">
      <path  d="
          M 60 60
          m 0 -47
          a 47 47 0 1 1 0 94
          a 47 47 0 1 1 0 -94
          " stroke="#e5e9f2" stroke-linecap="round" stroke-width="15" fill="none"
            style="stroke-dasharray: 295.31px, 295.31px; stroke-dashoffset: 0px;"></path>
      <path d="
          M 60 60
          m 0 -47
          a 47 47 0 1 1 0 94
          a 47 47 0 1 1 0 -94
          " stroke="#20a0ff" fill="none" opacity="1" stroke-linecap="round" stroke-width="15"
            :style="`stroke-dasharray: ${processPx}px, 295.31px; stroke-dashoffset: 0px; transition: stroke-dasharray 0.6s, stroke 0.6s, opacity 0.6s;`"></path>
    </svg>
    <div class="process_desc">
      {{Math.floor(process)}}
    </div>
  </div>
</template>

<style scoped>
.process {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 60%;
  width: 60%;
}
.process_desc{
  color: #97c5ea;
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
}

</style>